<template>
	<view class="tabbar">
		<ul>
			<li :class="{active:seleTabbar == 4}" @tap="routerTo('/pages/index/inner')">
				<image v-if="seleTabbar == 4" src="@/static/img/seleindex.png" mode=""></image>
				<image v-else src="@/static/img/index.png" mode=""></image>
				<view class="msg">
					首页
				</view>
			</li>
			<li :class="{active:seleTabbar == 0}" @tap="routerTo('/pages/index/innerIndex')">
				<image v-if="seleTabbar == 0" src="@/static/img/seleshop.png" mode=""></image>
				<image v-else src="@/static/img/shop.png" mode=""></image>
				<view class="msg">
					商城
				</view>
			</li>
			<li :class="{active:seleTabbar == 1}" @tap="routerTo('/pages/innerOrder/innerrank')">
				<image v-if="seleTabbar == 1" src="@/static/img/seleorder.png" mode=""></image>
				<image v-else src="@/static/img/order.png" mode=""></image>
				<view class="msg">
					排行榜单
				</view>
			</li>
			<li :class="{active:seleTabbar == 2}" @tap="routerTo('/pages/innerinfo/innerinfo')">
				<image v-if="seleTabbar == 2" src="@/static/img/selemessage.png" mode=""></image>
				<image v-else src="@/static/img/message.png" mode=""></image>
				<view class="msg">
					消息
				</view>
			</li>
			<li :class="{active:seleTabbar == 3}" @tap="routerTo('/pages/pageB/data/setUp')">
				<image v-if="seleTabbar == 3" src="@/static/img/selemy.png" mode=""></image>
				<image v-else src="@/static/img/my.png" mode=""></image>
				<view class="msg">
					我的
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
	export default{
		props:["seleTabbar"],
		data(){
			return{
			}
		},
		onLoad() {
			
		},
		methods:{
			routerTo(url){
				uni.redirectTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar{
		width: 100vw;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		ul{
			display: flex;
			padding: 6px 30px;
			justify-content: space-between;
			li{
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 22px;
					height: 22px;
					margin-bottom: 2px;
				}
				.msg{
					font-size: 10px;
				}
			}
			.active{
				color: #0A84FF;
			}
		}
	}
</style>